<template>
	<div class="container">
		<view class="system-height" :style="{height:statusBarHeight}"></view>
		<view class="content">
			<view class="asset-row">
				<view class="asset-item">
					<text class="value">{{userInfo.fansBlindBoxCount ||0}}</text>
					<text class="label">盲卡总数</text>
				</view>
				<view class="asset-item">
					<text class="value">{{userInfo.fansOrderAmount ||0}}</text>
					<text class="label">订单总额</text>
				</view>
				<view class="asset-item">
					<text class="value">{{userInfo.largeFansCount||0}}</text>
					<text class="label">大区粉丝</text>
				</view>
				<view class="asset-item">
					<text class="value">{{userInfo.smallFansCount||0}}</text>
					<text class="label">小区粉丝</text>
				</view>
			</view>
		</view>
		<!-- 空状态提示 -->
		<!-- <view class="empty-state">
			<span>暂无更多数据哦~</span>
		</view> -->
	</div>
</template>

<script>
	import {
		getinfo,
	} from '@/api/new.js';
	let statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
	export default {
		data() {
			return {
				userInfo: {},
				statusBarHeight: statusBarHeight,
			}
		},
		mounted() {
			this.getList()
		},
		methods: {
			getList: function() {
				this.loading = true
				getinfo().then((res) => {
					console.log(res)
					this.userInfo = res.data
					this.loading = false
				}).catch(err => {
					this.loading = false
				});
			},

		}
	}
</script>

<style scoped lang="scss">
	.container {
		width: 100%;
	}

	.content {
		width: 100%;
		height: 160px;
		padding: 20px;
		padding-top: 50px;
		background-color: #e73224;
		background-repeat: no-repeat;
		background-size: 100%;
	}

	.body-tab {
		z-index: 999;
		width: 92%;
		margin: 0 auto;
		background-color: #FFFFFF;
		border-top-right-radius: 10px;
		border-top-left-radius: 10px;
		border: 1px solid lavender;
		position: relative;
		top: -20px;
	}

	/* 顶部资产行 */
	.asset-row {
		display: flex;
		justify-content: space-between;
		margin-bottom: 30px;

		.asset-item {
			flex: 1;
			text-align: center;
			color: #fff;

			.label {
				display: block;
				font-size: 13px;
				line-height: 35px;
				margin-bottom: 5px;
			}

			.value {
				font-size: 18px;
				color: #f79b6d;
				font-weight: bold;
			}
		}
	}

	.empty-state {
		text-align: center;
		color: #909399;
		padding: 20px;
		height: 120px;
	}
</style>